/*
* @Author: Administrator
* @Date:   2018-09-09 19:27:34
* @Last Modified by:   Administrator
* @Last Modified time: 2018-09-11 19:05:14
*/
import styled from 'styled-components';
import one from '../../static/one.png'

export const HomeWrapper = styled.div`
  overflow: hidden;
  width: 960px;
  margin: 0 auto;
`;
export const HomeLeft = styled.div`
  margin-left: 15px;
  padding-top: 30px;
  width: 625px;
  float: left;
  .banner-img{
  	height: 240px;
  	width: 625px;
  }
`;
export const TopicWrapper = styled.div`
 position: relative; 
 padding-bottom: 10px;
 overflow: hidden;
 width: 625px;
 height: 104px;
 margin-top: 40px;
 border-bottom: 1px solid #eee;
`;
export const TopicItem = styled.a`
 display: block;
 float: left;
 height: 34px;
 margin: 0 25px 20px 0;
 border-radius: 4px;
 background: #f7f7f7;
 border: 1px solid #dcdcdc;
 cursor: pointer;
 .topic-img{
  width: 34px;
  height: 33px;
 }
 .topic-contain {
  float: right;
  line-height: 33px;
  margin-right: 10px;
  font-size: 14px;
  text-align: center;
  padding-left: 10px;
  box-sizing: border-box;
 }
`;
export const TopicItems = styled.a`
 position: absolute;
 top: 38px;
 right: 275px; 
 width: 100px;
 text-align: center;
 font-size: 14px;
 color: #787878;
 padding-top: 28px;
 cursor: pointer;
`;
export const ListItem = styled.div`
 position: relative;

 overflow: hidden;
 padding: 20px 0;
 border-bottom: 1px solid #dcdcdc
 border-bottom: 1px solid #eee;
 .list-img{
  margin-top: 10px;
  width: 125px;
  height: 100px;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  float: right;
 }
`;
export const ListInfo = styled.div`
 position: absolute;
 top: 25px;
 left: 0;
 width: 500px;
 float: left;
 .list-title{
  line-height: 27px;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
 }
 .list-title:hover{
  transition: all .2s;
  font-size: 17px;
 }
 .list-contain{
  font-size: 13px;
  line-height: 24px;
  color: #999;
  margin-right: 20px;
  padding-top: 5px;
  box-sizing:border-box;
 }
`;
export const ListIcon = styled.div`
 width: 483px;
 height: 21px;
 color: #ccc;
 line-height: 21px;
 .icon-title{
  font-size: 7px;
 }
 .icon-title:hover{
   color: #aaa;
 }
 .song{
  font-size: 14px;
  margin-left: 15px;
 }
 .song:hover{
  color: #aaa;
 }
 .qi{
  font-size: 14px;
  margin-left: 15px;
 }
 .qi:hover{
  color: #aaa;
 }
`;
export const LoadMore = styled.div`
 width: 100%;
 height: 35px;
 line-height: 35px;
 cursor: pointer;
 margin: 25px 0;
 background: #a5a5a5;
 text-align: center;
 border-radius: 15px;
 color: #fff;
`;

export const HomeRight = styled.div`
 width: 280px;
 float: right;
`;
export const RecommendWrapper = styled.div`
 width: 280px;
 margin: 26px 0;
`;
export const RecommendItem = styled.div`
 width: 280px;
 height:50px;
 background: url(${one});
 background-size: contain;
 margin-bottom: 14px;
`;
export const WriterWrapper = styled.div`
 width: 280px;
 margin: 20px 0;
`;
export const WriterItems = styled.div`
 margin-bottom: 20px;
 position: relative;
 overflow: hidden;
 width: 280px;
 .writer-img{
  height: 65px;
  width: 65px;
  border: 1px solid #ccc;
  border-radius: 50%;
 }
`;
export const WriterTitle = styled.div`
  &.song{
    float:right;
    font-size: 14px;
    margin: 15px 0 0 0;
    padding-right: 80px;
    box-sizing: border-box;
    line-height: 15px
  }
  &.hong{
    position: absolute;
    top:40px;
    right: 65px;
    font-size: 10px;
    color: #aaa;
    line-height: 12px;
    height: 12px;
  }
`;
export const BackTop = styled.div`
 position: fixed;
 bottom: 20px;
 right: 30px;
 height:40px;
 line-height: 40px;
 width: 40px;
 text-align: center;
 border: 1px solid #aaa;
 cursor:pointer;
 .song{
  font-size: 20px;
  color: #aaa;
 }
`;

